<template>
  <div>
    <div class="headimg">
      <img :src="outdata.image" alt="">
      <div class="collection" v-if="this.collectionState === '0'" @click="addCollection()">
        <hd-svg-icon name="hd-shoucang" size="25px" color="#333333" style="margin-top:3px"  ></hd-svg-icon>
      </div>
      <div class="collection" v-if="this.collectionState === '1'" @click="cancelCollection()">
        <hd-svg-icon name="hd-shoucang1" size="25px"  style="margin-top:3px"></hd-svg-icon>
      </div>
    </div>
    <div class="titleinfo">
      <div style="padding:10px; background-color:#FFF">
        <yd-flexbox>
          <div style="width:90%">
            <span class="productTitle">{{outdata.title}}</span>
          </div>
          <div @click="show2 = true" style="float:right;width:10%" v-if="outdata.book == '0' && order_show == '0'">
            <hd-svg-icon name="hd-keyuding" slot="left" size="30px" color="#FFA500"></hd-svg-icon>
          </div>
        </yd-flexbox>
      </div>
      <div style="padding-left:10px;background-color:#FFF">
        <span style="font-size:10px;color:#cccccc">自由行攻略 {{outdata.create_time}}</span>
      </div>
    </div>
    <div class="fuwenben">
      <div v-html="outdata.content"></div>
    </div>
    <yd-popup v-model="show2" position="bottom" height="65%" slot="" style="">
      <!-- <div class="yudinghead" > -->
        <!-- <div class="head" v-show="show2 == true">
          <img src="http://img1.3lian.com/2015/a1/43/d/152.jpg" alt="" style="width:50px; height:50px;border-radius: 50px;">
        </div> -->
        <!-- <div class="yudingname">EricLee</div> -->
        <!-- <div class="yudingline">更多精品线路</div> -->
      <!-- </div> -->
      <div class="yudingbody">
        <yd-flexbox>
          <div style="padding:5px">
            <hd-svg-icon name="hd-luxian-yuanquan" size="30px" color="#FFA500"></hd-svg-icon>
          </div>
          <div>可预订线路</div>
        </yd-flexbox>
      </div>
      <div class="">
        <div class="yudingcontent" v-for="item in bookline" :key="item.index">
            <router-link :to="{path:'boutiquelineinfo',query: item}">
              <div>
                <yd-flexbox class="booklist">
                  <div style="width:90%;" class="text-center">
                    <span class="productName">{{item.product_name}}</span>
                  </div>
                  <div style="float:right;width:10%" v-if="outdata.book == '0'">
                    <hd-svg-icon name="hd-keyuding" slot="left" size="30px" color="#FFA500"></hd-svg-icon>
                  </div>
                </yd-flexbox>
                <yd-flexbox>
                  <yd-flexbox-item style="padding-left:10px;color:#545454;">出发城市: {{item.start_city_arr}}</yd-flexbox-item>
                  <yd-flexbox-item style="padding-left:10px;color:#545454;" v-if="item.product_type=='0'">产品类型: 周边</yd-flexbox-item>
                  <yd-flexbox-item style="padding-left:10px;color:#545454;" v-if="item.product_type=='1'">产品类型: 国内长线</yd-flexbox-item>
                  <yd-flexbox-item style="padding-left:10px;color:#545454;" v-if="item.product_type=='2'">产品类型: 国内当地参团</yd-flexbox-item>
                  <yd-flexbox-item style="padding-left:10px;color:#545454;" v-if="item.product_type=='3'">产品类型: 出境当地参团</yd-flexbox-item>
                  <yd-flexbox-item style="padding-left:10px;color:#545454;" v-if="item.product_type=='4'">产品类型: 出境短线</yd-flexbox-item>
                  <yd-flexbox-item style="padding-left:10px;color:#545454;" v-if="item.product_type=='5'">产品类型: 出境长线</yd-flexbox-item>
                </yd-flexbox>
                <yd-flexbox>
                  <yd-flexbox-item style="padding:5px 10px;color:#545454;">成人价格:&nbsp;¥{{item.min_adult_sale_price / 100}}</yd-flexbox-item>
                  <yd-flexbox-item style="padding:5px 10px;color:#545454;">儿童价格:&nbsp;¥ {{item.min_children_sale_price / 100}}</yd-flexbox-item>
                </yd-flexbox>
              </div>
            </router-link>
        </div>
      </div>
    </yd-popup>
    
  </div> 

</template>

<script>
export default {
  name: 'boutiquelinedetail',
  data() {
    return {
      outdata: [],
      show2: false,
      bookline: [],
      collectionState: '',
      id: this.$route.query.id,
      destination: this.$route.query.destination,
      order_show: '0'
    };
  },
  mounted: function() {
    // 判断浏览器类型 打开方式是否是微信浏览器方式打开
    var ua = window.navigator.userAgent.toLowerCase()
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      this.order_show = '1';
    } else {
    }
    this.load();
  },
  methods: {
    load() {
      // 浏览次数增加
      this.hdAjax({
        url: this.API.updateLineSeeNum,
        data: {
          id: this.id
        },
        success: resultData => {
          // 观看人数增加后调用详情
          this.hdAjax({
            url: this.API.setLineInfo,
            data: {
              id: this.id
            },
            success: resultData => {
              console.log(resultData);
              this.outdata = resultData.data;
            }
          });
        }
      });
      // 可预订线路
      this.hdAjax({
        url: this.API.findHUDProductList,
        method: 'POST',
        data: {
          destination: this.destination
        },
        success: resultData => {
          console.log(resultData);
          this.bookline = resultData.data;
        }
      });
      // 收藏状态
      this.hdAjax({
        url: this.API.getCollectionState,
        data: {
          source_id: this.$route.query.id
        },
        success: (resultData) => {
          this.collectionState = resultData.data.state;
          // console.log('===========>' + this.collectionState)
        }
      });
      // 添加足迹
      this.hdAjax({
        method: 'POST',
        url: this.API.createFootprint,
        data: {
          id: this.$route.query.id,
          type: 'L'
        },
        success: (resultData) => {
          // this.collectionState = resultData.data.state;
          console.log('===========>' + 'success')
        }
      });
    },
    // 添加收藏
    addCollection() {
        // alert('!!!!!')
      this.hdAjax({
        method: 'POST',
        url: this.API.createCollection,
        data: {
          id: this.id,
          type: 'L'
        },
        success: (resultData) => {
          this.$dialog.toast({mes: '您已成功收藏!'})
          this.hdAjax({
            url: this.API.getCollectionState,
            data: {
              source_id: this.$route.query.id
            },
            success: (resultData) => {
              this.collectionState = resultData.data.state;
              // console.log('===========>' + this.collectionState)
            }
          });
        }
      });
    },
    // 取消收藏
    cancelCollection() {
      // alert('!!!!!')
      this.hdAjax({
        method: 'post',
        url: this.API.createCollection,
        data: {
          id: this.$route.query.id,
          type: 'L'
        },
        success: (resultData) => {
          this.$dialog.toast({mes: '您已取消收藏!'})
          this.hdAjax({
            url: this.API.getCollectionState,
            data: {
              source_id: this.$route.query.id
            },
            success: (resultData) => {
              this.collectionState = resultData.data.state;
              // console.log('===========>' + this.collectionState)
            }
          });
        }
      });
    }
  }
};
</script>

<style>
body {
  font-family: "微软雅黑";
  background-color: #f0f0f0;
}
header {
  background-color: #393a3f;
}
.headimg img {
  width: 100%;
  height: 200px;
  position: relative;
}
.titleinfo {
  background-color: #fff;
  height: 80px;
  border-radius: 5px;
}
.productTitle{
  font-size: 18px;
  overflow: hidden;
  text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;/*行数*/
  -webkit-box-orient:vertical;
}
.productName{
  font-size: 18px;
  overflow: hidden;
  text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;/*行数*/
  -webkit-box-orient:vertical;
}
.fuwenben {
  margin-top: 5px;
  background-color: #fff;
  padding: 5px;
  border-radius: 5px;
}
.fuwenben img {
  width: 100%;
}
.yudinghead {
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #BABABA;
  font-size:15px;
  position: relative;
}
.pop {
  position: absolute;
}
.yudingname {
  padding-left:5px;
  padding-top:5px;
  color:#FFA500;
  font-weight:bold;
  width: 100px;
}
.yudingline {
  padding-left:5px;
  padding-top:5px;
}
.yudingbody {
  height:40px;
  width:100%;
  border-bottom: 1px solid #BABABA;
  background-color:#EAEAEA;
  font-size:15px
}
.yudingcontent {
  width:100%;
  height: 100px;
  border-bottom: 1px solid #f2f2f2;
  font-size:15px;
}
.yudingcontent div {
  border-radius: 10px;
}
.head {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  right: 1px;
  top: -25px;
  position: absolute;
}
.booklist {
  padding: 5px;
}
/* .yd-popup-content {
  overflow-y: inherit;
} */
.collection{
  float:right;
  margin-right: 10px;
  margin-top: -180px;
  position: relative;
  width: 45px;
  height: 20px; 
  text-align:center
}
/* .scrollContent{
  height: 280px;
  overflow-y: scroll;
} */
</style>
